<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <button @click="sayHello">Vue2：Hello</button>
  <br><br>
  <button @click="sayWelcome">Vue3：Welcome</button>
</template>

<script>
import {h} from 'vue';

export default {
  name: "App",
  // region Vue2配置依然可用，但不建议Vue2和Vue3混用
  data() {
    return {
      name: '张三',
      age: 18
    }
  },
  methods: {
    sayHello() {
      alert(`我叫${this.name}，今年${this.age}，Hello！`);
    }
  },
  // endregion
  setup(){
    let name = '张三';
    let age = 18;
    function sayWelcome(){
      alert(`我叫${name}，今年${age}，Welcome！`);
    }

    // 返回一个对象（常用）
    return{
      name,
      age,
      sayWelcome
    }

    // 返回一个渲染函数（不常用）
    /*return () => {
      return h('h1', 'abc');
    }*/
  },
}
</script>

<style scoped>

</style>